'use client';

import { orderStatusValues } from '@/lib/db/schema/enum';
import type { listShopOrdersByPage } from '@/service/query/order';
import { shopOrderSearchSchema } from '@/service/query/schema/order';
import { type OrderSummary, orderStatusMap } from '@/service/type/order';
import type { ColumnDef } from '@tanstack/react-table';
import dayjs from 'dayjs';
import Link from 'next/link';
import { Suspense } from 'react';
import DateRangePicker from '../common/date-range-picker';
import MultiSelector from '../common/multi-selector';
import SearchFilter from '../common/search-filter';
import TableLoading from '../common/table-loading';
import { Button } from '../ui/button';
import DataTable from '../ui/data-table';
import HandleOrderButton from './handle-order-button';
import OrderStatusBadge from './order-status-badge';

const orderColumns: ColumnDef<OrderSummary>[] = [
  {
    accessorKey: 'id',
    header: '订单ID',
  },
  {
    accessorKey: 'name',
    header: '用户姓名',
  },
  {
    accessorKey: 'address',
    header: '收货地址',
  },
  {
    accessorKey: 'phone',
    header: '用户手机号',
  },
  {
    accessorKey: 'status',
    header: '状态',
    cell: ({ row }) => <OrderStatusBadge status={row.original.status} />,
  },
  {
    accessorKey: 'createdAt',
    header: '创建时间',
    cell: ({ row }) => {
      const { createdAt } = row.original;
      return <div>{dayjs(createdAt).format('YYYY-MM-DD HH:mm:ss')}</div>;
    },
  },
  {
    id: 'action',
    header: '操作',
    cell: ({ row }) => {
      const { status } = row.original;
      return (
        <div className="py-1 flex items-center gap-2 justify-end text-lg translate-y-[3px]">
          <HandleOrderButton
            variant="ghost"
            orderId={row.original.id}
            status={status}
          />
          <Link href={`/shop/order/${row.original.id}`}>
            <Button variant="ghost" className="p-2 flex items-center">
              详情
              <span className="i-ri-arrow-right-s-line" />
            </Button>
          </Link>
        </div>
      );
    },
  },
];

export default function OrderTable({
  pageData,
}: {
  pageData: ReturnType<typeof listShopOrdersByPage>;
}) {
  return (
    <div className="space-y-5">
      <SearchFilter
        formSchema={shopOrderSearchSchema}
        defaultValues={{
          id: '',
          name: '',
          address: '',
          phone: '',
          status: [],
          dateRange: undefined,
        }}
        formItems={[
          { name: 'id', label: '订单ID' },
          { name: 'name', label: '用户姓名' },
          { name: 'address', label: '用户地址' },
          { name: 'phone', label: '用户电话' },
          {
            name: 'status',
            label: '订单状态',
            inputComp: MultiSelector,
            options: {
              items: orderStatusValues.map((i) => ({
                label: orderStatusMap[i],
                value: i,
              })),
            },
          },
          { name: 'dateRange', label: '创建时间', inputComp: DateRangePicker },
        ]}
      />
      <Suspense fallback={<TableLoading />}>
        <DataTable<OrderSummary> pageData={pageData} columns={orderColumns} />
      </Suspense>
    </div>
  );
}
